import React from 'react'
import { Switch, Route, Redirect, withRouter } from "react-router-dom"
import LoginView from './login/LoginView';
import AboutView from './about/AboutView';
import Auth from './util/AuthMock'
// 路由鉴权案例：

function App(props) {

  return (
    <div className="App">
      <Switch>

        <Route exact path="/" render={() => <Redirect to="/login" />}></Route>
        <Route path="/login" component={LoginView}></Route>
        <PrivateRoute authed={Auth} path="/about" component={AboutView} />
      </Switch>
    </div >
  );
}

export default withRouter(App);


const PrivateRoute = (props) => {
  // console.log(props)
  // 注意这里的对象解构赋值的写法：Com变量，指向 AboutView 对象。
  const { authed, path, "component": Com } = props;
  return (
    <Route path={path} render={() => {
      // 权限判断，渲染不同的组件
      return authed.isAuthenticated ?
        <Com {...props} /> :
        // 没有权限时，就重定向到login页面，并且把要访问的目标url，通过 state.from 传递到login组件。
        // 在login,登录成功后，就直接跳转到 about组件页面。
        <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
    }}></Route>
  )
}

